<template>
	<view class="container">
		<cu-custom bgColor="bg-white">
			<block slot="right">
				<view class="color-100 bar-left justify-between" style="display: flex;">
					<text class="left-text" style="margin-left: 15px;">相亲</text>
					<text class="left-right" style="margin-right: 15px;" @click="goInformation">相亲资料</text>
				</view>
			</block>
		</cu-custom>

		<scroll-view scroll-y class="page">
			<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="goSwiperActive(item)">
					<!-- <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image> -->
					<image :src="item.banner" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</scroll-view>
		<view class="list-content">
			<view class="tab">
				<tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></tabs>
				<view class="filtrate" @click="filtrate" v-show="tabIndex=='0'"></view>
			</view>
			<swiper class="swiper" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,i) in tabs" :key="i">
					<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :searchData="searchData">
					</mescroll-item>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import List from './components/list.vue'
	import Tabs from "./components/tabs/tabs.vue";
	import MescrollItem from "./components/mescroll-swiper-item.vue";
	import HomeService from '../../service/home.js';
	export default {
		data() {
			return {
				// 轮播图
				swiperList: [],
				// height: "400px", // 需要固定swiper的高度
				// 搜索条件
				searchData: {
					mysex: '',
					issearch: '1',
					address: '',
					huji: '',
					minage: '',
					maxage: '',
					minheight: '',
					maxheight: '',
					xueli: '',
					income: '',
					marry: '',
				},
				// tab 栏
				tabs: [{
					name: '推荐',
					id: '1', // 自定义 推荐id
				}, {
					name: '我关注的',
					id: '2', // 自定义 我关注的id
				}, {
					name: '关注我的',
					id: '3', // 自定义 关注我的id
				}],
				// 当前脚标
				tabIndex: 0, // 当前tab的下标
			};
		},
		components: {
			List,
			Tabs,
			MescrollItem
		},
		computed: {
			...mapState({
				//这里可以通过这种方式引用相应模块的state数据，其中user是模块名。在代码的其他部分可以使用this.userInfo访问数据
				user: ({
					user
				}) => user.userInfo,
			}),
		},
		onLoad() {
			// 初始化towerSwiper 传已有的数组名即可
			this.TowerSwiper('swiperList');
			// 需要固定swiper的高度
			// this.height = uni.getSystemInfoSync().windowHeight + 'px'
			// console.log(this.user.mysex)
		},
		methods: {
			//筛选
			filtrate() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../filtrate/filtrate'
				})
			},
			// 搜索
			search(data) {
				this.searchData = {
					...this.searchData,
					...data
				}
				console.log(this.searchData)
				this.$refs.mescrollItem[this.tabIndex].downCallback()
				// this.$refs.mescrollItem.mescroll.resetUpScroll()
				// this.$refs[`mescrollItem${this.tabIndex}`].$refs[`mescrollRef${this.tabIndex}`].triggerDownScroll()
			},
			// 相亲资料
			goInformation() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../information/information'
				})
			},
			// 获取banner 本方法 在index.js 中调用
			async getBanner() {
				const res = await HomeService.bannerService()
				this.swiperList = res.dataList
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},

			// 点击轮播图 type == 2 的是进入活动列表
			goSwiperActive(item) {
				if (item.type === 2) {
					uni.navigateTo({
						url: '../myactivities/activeList',
						animationDuration: 200
					})
				}
			},
		},
		computed: {
			...mapState({
				//这里可以通过这种方式引用相应模块的state数据，其中user是模块名。在代码的其他部分可以使用this.userInfo访问数据
				user: ({
					user
				}) => user.userInfo,
			}),
		},

	}
</script>

<style lang="scss" scoped>
	.bar-left {
		position: absolute;
		right: 0;
		width: 100%;

		.left-text {
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 21px;
			color: #333333;
		}

		.left-right {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 21px;
			color: #333333;
		}
	}

	.page {
		// height: calc(100vh - (100upx + env(safe-area-inset-bottom) / 2));
	}

	.screen-swiper {
		min-height: 100px;
	}

	.tab {
		padding: 10upx 26upx 0upx 0upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.filtrate {
			width: 40upx;
			height: 40upx;
			background-repeat: no-repeat;
			background-image: url(../../static/service/filtrate.png);
		}
	}

	.container {
		flex: 1;

		.list-content {
			position: relative;
			width: 100%;
			flex: 1;
			position: absolute;
			left: 0;
			top: 410upx;
			right: 0;
			bottom: 0;
		}

		.swiper {
			height: auto;
			position: absolute;
			left: 0;
			top: 76upx;
			right: 0;
			bottom: 100upx;
			background-color: #fff;
		}
	}
</style>
